<template>
	<view class="container">
		<view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" :prop="message"
			:change:prop="renderTest.changeWatch" id="renderId"></view>

		<!-- <view class="message">{{message}}</view> -->
		<!-- 
		 service层一旦message发生改变，会调用 renderjs中的messageChanged的方法
		 -->
		<!-- service层data中数据的改变操作放在service层 -->

		<view class="pop" v-if="!vuex_token" @click="gologin">
			<view class="pop-body">
				<image mode='aspectFit' class="img" src="../../static/demo.jpg"></image>
				<view class="text">查看高清街景</view>
			</view>
		</view>


		<view class="bottom-layer" @click="gotohome">
			<image  mode="scaleToFill" style="width:300px;height:50px;"  src="../../static/home.png"></image>
		</view>

		<page-tabpars class="pagetabpar"></page-tabpars>
	</view>

</template>

<script>
	// service 层
	export default {
		data() {
			return {
				message: "这是service的测试message"
			}
		},
		onLoad() {
			//plus.navigator.closeSplashscreen()
		},
		onShow() {
			this.$u.vuex('active', 'center')
		},
		methods: {
			gologin() {
				this.$goWindow('../login/login')
			},
			onViewClick(options) {
				// console.log(options)
				// this.message = options.test
				// uni.showModal({
				// 	title: "数据传递",
				// 	content: options.test
				// })
			},
			getMessage(options) {
				//console.log("测试renderjs调用此方法：" + JSON.stringify(options))
			},
			
			gotohome() {
				uni.navigateTo({
					url:'../homeTown/homeTown'
				})
			}
			
		}
	}
</script>

<style>
	.message {
		font-size: 22px;
		height: 120px;
		margin-top: 60upx;

	}
</style>

<script module="renderTest" lang="renderjs">
	import {
		mymap
	} from '../../utils/mymap.js'
	export default {
		data() {
			return {
				map: null
			}
		},
		mounted() {
			// console.log(this.message,"renderjs中可以使用service层传递来的数据")
			// 引入百度地图
			this.$nextTick(() => {
				let _this = this;
				mymap('axwAoPrgDr46Kxq4ZHB8eLfzpXhg3dsI').then((mymap) => {
					var map = new BMapGL.Map('renderId'); // 创建Map实例
					map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 0);
					map.enableScrollWheelZoom(true);
					map.setMapType(BMAP_EARTH_MAP);
					_this.map = map;
				});
			});
		},
		methods: {
			initMaps() {
				var map = new BMapGL.Map("renderId"); // 创建Map实例
				map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
				map.enableScrollWheelZoom(true);
			},
			// id 为 renderId的区域，点击触发的事件
			onClick(event, ownerInstance) {
				// 调用 service层的onViewClick方法,传值
				// console.log(this.message, "************************")
				// ownerInstance.callMethod('onViewClick', {
				// 	test: '这是点击renderjs的区域，向service层传递变量'
				// })
			},
			messageChanged(newValue, oldValue, ownerVm, vm) {
				console.log("newValue*********" + newValue)
				console.log("oldValue*********" + oldValue)
				ownerVm.callMethod('getMessage', {
					test: '123'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	#renderId {
		width: 100%;
		height: 100vh;
		background-color: #00818A;
	}

	.container {
		position: relative;

		.bottom-layer {
			position: absolute;
			bottom: 320upx;
			text-align: center;
			width: 100%;
			z-index: 3000;
		}

		.pop {
			position: absolute;
			top: calc(50% - 80px);
			left: calc(50% - 40px);
			z-index: 3000;

			.pop-body {
				position: relative;
				width: 100%;
				height: 100%;
				z-index: 2000;

				.img {
					width: 80px;
					height: 80px;
					border: 2px solid white;
					border-radius: 10px;
				}

				.text {
					position: absolute;
					bottom: 6px;
					z-index: 3000;
					left: 0;
					width: calc(100% - 4px);
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					font-size: 12px;
					text-align: center;
					padding: 2px 0;
					margin: 0 2px;
					box-sizing: border-box;
					border-radius: 0 0 10px 10px;
				}
			}

			&::before {
				position: absolute;
				content: "";
				width: 15px;
				height: 15px;
				bottom: -4px;
				left: calc(50% - 10px);
				z-index: 100;
				background-color: white;
				transform: rotate(45deg);
				border: 2px solid #58ABF1;
				border-radius: 4px;
			}
		}

		.message {
			display: none;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 2000;
		}
	}
</style>
